<template>
    <a-modal title="新增始发地" :visible="visible" @cancel="onClose" @ok="handleAdd">
        <a-form-model ref="form" :model="form" :rules="rules">
            <a-form-model-item label="始发地" prop="startAddress">
                <a-cascader v-model="form.startAddress" :options="addressList" :field-names="{
                    label: 'city',
                    value: 'city',
                    children: 'children',
                }" placeholder="请选择目的地" />
            </a-form-model-item>
            <a-form-model-item label="详细地址" prop="detailAdress">
                <a-input v-model="form.detailAdress" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="联系人" prop="name">
                <a-input v-model="form.name" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="联系电话" prop="phone">
                <a-input v-model="form.phone" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="粘贴地址，自动识别" prop="totalInfo">
                <a-textarea v-model="form.totalInfo" autoSize placeholder="粘贴信息，自动拆分姓名、电话和地址" />
            </a-form-model-item>
            <a-button @click="parseAddress" type="primary">自动识别</a-button>
        </a-form-model>
    </a-modal>
</template>

<script>
import { Cascader as ACascader } from 'ant-design-vue'
import addressList from "@/utils/ChinaCitys.js";
import AddressParse from 'address-parse';
export default {
    props: {
        text: Object,
    },
    components: {
        'a-cascader': ACascader,
    },
    data() {
        return {
            visible: false,
            form: {
                startAddress: undefined,
                detailAdress: undefined,
                name: undefined,
                totalInfo: undefined,
                phone: undefined,
            },
            rules: {
                startAddress: [{ required: true, message: '始发地不能为空', trigger: 'blur' }],
                detailAdress: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
                name: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
                phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
            },
            addressList: undefined,
        };
    },
    created() {
        this.addressList = addressList
    },
    watch: {
        'text': function (val) {
            this.form = { ...val }
        }
    },
    methods: {
        parseAddress() {
            /*判断解析的地址内容不为空*/
            if (this.form.totalInfo != '') {
                const result = AddressParse.parse(this.form.totalInfo);
                this.form.name = result[0].name;
                this.form.phone = result[0].mobile;
                this.form.startAddress = [result[0].province, result[0].city, result[0].area]
                this.form.detailAdress = result[0].details;
            } else {
                this.$toast('请输入您要识别的地址')
            }
        },
        onClose() {
            this.visible = false;
        },
        open(type) {
            // 1新增 2修改
            this.visible = true;
            this.type = type
            if (type === 1) {
                this.form = {
                    key: undefined,
                    startAddress: undefined,
                    detailAdress: undefined,
                    name: undefined,
                    totalInfo: undefined,
                    phone: undefined,
                }
            }
        },
        handleAdd() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    console.log(this.form);
                    if(this.form.startAddress[2].length === 0) {
                        this.$message.error('省市区不全！')
                        return;
                    }
                    this.form.address = this.form.startAddress.join()
                    if (this.type === 1) {
                        this.$emit('add', this.form)
                    } else {
                        this.$emit('edit', this.form)
                    }
                    this.onClose()
                } else {
                    return false
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped></style>